<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>支出-展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/jquery.dataTables.min.css">

    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="./js/ie/html5.min.js"></script>
    <script type="text/javascript" src="./js/ie/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">

            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">

            <div class="layui-card">

                <div class="layui-card-body ">
                    <div class="layui-collapse" lay-filter="test">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                            <div class="layui-colla-content">
                                <form class="layui-form" action="selectByExampleCostdetails" method="post">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">交易时间</label>
                                            <div class="layui-input-inline layui-show-xs-block">
                                                <input th:value="${startTime}" class="layui-input" placeholder="开始日"
                                                       name="startTime" id="start">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline layui-show-xs-block">
                                                <input th:value="${endTime}" class="layui-input" placeholder="截止日"
                                                       name="endTime" id="end">
                                            </div>

                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">实付金额</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input th:value="${startMoney}" type="text" name="startMoney"
                                                       placeholder="￥" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input th:value="${endMoney}" type="text" name="endMoney"
                                                       placeholder="￥" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">所属用户</label>
                                            <div class="layui-input-inline">
                                                <select name="userId" lay-verify="" lay-search="">
                                                    <option th:value="${session.user.id}"
                                                            th:text="${session.user.nameUser}" value="1">张峰浦
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-inline">
                                            <label class="layui-form-label">类别</label>
                                            <div class="layui-input-inline">
                                                <select name="largeclass" lay-verify="" lay-search="">
                                                    <option value="">All</option>
                                                    <option th:selected="${largeclass ==  '酒水饮品'}" value="酒水饮品">酒水饮品
                                                    </option>
                                                    <option th:selected="${largeclass ==  '美食'}" value="美食">美食</option>
                                                    <option th:selected="${largeclass ==  '文娱娱乐'}" value="文娱娱乐">文娱娱乐
                                                    </option>
                                                    <option th:selected="${largeclass ==  '交通通行'}" value="交通通行">交通通行
                                                    </option>
                                                    <option th:selected="${largeclass ==  '数码周边'}" value="数码周边">数码周边
                                                    </option>
                                                    <option th:selected="${largeclass ==  '手机电脑'}" value="手机电脑">手机电脑
                                                    </option>
                                                    <option th:selected="${largeclass ==  '家用电器'}" value="家用电器">家用电器
                                                    </option>
                                                    <option th:selected="${largeclass ==  '居家用品'}" value="居家用品">居家用品
                                                    </option>
                                                    <option th:selected="${largeclass ==  '其它'}" value="其它">其它</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label for="subclass" class="layui-form-label">
                                            <span class="x-red">*</span>消费性质</label>
                                        <div class="layui-input-inline">
                                            <select name="subclass" id="subclass">
                                                <option value="">All</option>
                                                <option th:selected="${subclass ==  '日常开销'}" value="日常开销">日常开销</option>
                                                <option th:selected="${subclass ==  '个人购物'}" value="个人购物">个人购物</option>
                                                <option th:selected="${subclass ==  '代买'}" value="代买">代买</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label for="tradename" class="layui-form-label">
                                            <span class="x-red">*</span>商品名称</label>
                                        <div class="layui-input-inline">
                                            <input th:value="${tradename}" type="text" id="tradename" name="tradename"
                                                   autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label for="satisfactiondegree" class="layui-form-label">
                                            <span class="x-red">*</span>满意度
                                        </label>
                                        <div class="layui-input-inline">
                                            <select name="satisfactiondegree" id="satisfactiondegree">、
                                                <option value="">All</option>
                                                <option th:selected="${satisfactiondegree ==  '待定'}" value="待定">待定
                                                </option>
                                                <option th:selected="${satisfactiondegree ==  '十分满意'}" value="十分满意">
                                                    十分满意
                                                </option>
                                                <option th:selected="${satisfactiondegree ==  '满意'}" value="满意">满意
                                                </option>
                                                <option th:selected="${satisfactiondegree ==  '一般'}" value="一般">一般
                                                </option>
                                                <option th:selected="${satisfactiondegree ==  '不满意'}" value="不满意">不满意
                                                </option>
                                                <option th:selected="${satisfactiondegree ==  '退款'}" value="退款">退款
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-form-item layui-form-text">
                                        <label for="note" class="layui-form-label">备注</label>
                                        <div class="layui-input-block">
                                            <textarea th:text="${note}" placeholder="请输入内容" id="note" name="note"
                                                      class="layui-textarea"></textarea>
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加支出信息','goToCostdetailsAddNokey',800,600)">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="myTable">
                        <thead>
                        <tr>
                            <th>所属id</th>
                            <th>交易时间</th>
                            <th>应付金额</th>
                            <th>实付金额</th>
                            <th>大类别</th>
                            <th>消费性质</th>
                            <th>商品名称</th>
                            <th>满意度</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="list:${listsCostdetails}">
                            <td th:text="${session.user.nameUser}">张建强</td>
                            <td th:text="${#dates.format(list.timeTransaction,'yyyy-MM-dd HH:mm:ss')}">交易时间</td>

                            <th th:text="${list.amountOfMoney}+'￥'">实付金额</th>
                            <td th:text="${list.amountOfMoneyActual}+'￥'">应付金额</td>
                            <td th:text="${list.largeClass}">大类别</td>
                            <td th:text="${list.subClass}">消费性质</td>
                            <td th:text="${list.tradename}">商品名称</td>
                            <td th:text="${list.satisfactionDegree}">满意度</td>
                            <td th:text="${list.note}">备注</td>
                            <td class="td-manage">
                                <a title="编辑" onclick="xadmin.open('支出信息修改','orderList1-GoToCostdetailsEdit?cdId=12')"
                                   href="javascript:;"
                                   th:onclick="xadmin.open('支出信息修改','goToCostdetailsEditByKey?id=[[${list.id}]]')">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" onclick="member_del(this,'${list.cdId1}')" href="javascript:;"
                                   th:onclick="member_del(this,'[[${list.id}]]')">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>


                    <table class="layui-table layui-form" id="example">
                        <thead>
                        <tr>
                            <th>所属id</th>
                            <th>交易时间</th>
                            <th>应付金额</th>
                            <th>实付金额</th>
                            <th>大类别</th>
                            <th>消费性质</th>
                            <th>商品名称</th>
                            <th>满意度</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                        <tr>
                            <th>所属id</th>
                            <th>交易时间</th>
                            <th>应付金额</th>
                            <th>实付金额</th>
                            <th>大类别</th>
                            <th>消费性质</th>
                            <th>商品名称</th>
                            <th>满意度</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </tfoot>
                    </table>


                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>

    $('#example').dataTable({
        "ajax": 'user/jsonCostdetailsIndexList',
        "columns": [
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return meta.row + 1;//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.timeTransaction;//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.amountOfMoney + '￥';//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.amountOfMoneyActual + '￥';//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.largeClass;//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.subClass;//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.tradename;//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.satisfactionDegree;//data.userId
                }
            },
            {
                "data": null,
                "render": function (data, type, row, meta) {

                    return data.note;//data.userId
                }
            },
            {
                "data": null,
                "sClass" :"td-manage",
                "render": function (data, type, row, meta) {
                    /*
                    <a title='编辑' onclick='xadmin.open('支出信息修改','goToCostdetailsEditByKey?id=1')' href='javascript:;'> <i class='layui-icon'>&#xe642;</i></a>
                     */
                    return '<a title="编辑" onclick="xadmin.open(\'支出信息修改\',\'goToCostdetailsEditByKey?id=' + data.id + '\')" href="javascript:;"><i class="layui-icon">&#xe642;</i></a>' +
                        '<a title="删除" onclick="member_del(this,\'' + data.id + '\')" href="javascript:;"><i class="layui-icon">&#xe640;</i></a>';
                }
            },
        ],
        "bProcessing": true,//加载进度提示(默认：false)
        "aLengthMenu": [15, 25, 50, 100], //更改显示记录数选项(默认：[10,25,50,100])
        // 国际化
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });





</script>
<script>
    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm(id, function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            //costdetails-edit-delete
            $.ajax({
                type: "post",
                url: "/deleteCostdetailsByKey",
                data: {id: id},
                dataType: 'json',//dataType:"json",使得返回来的数据格式为json 如果不 添加该条属性，则返回来的为字符串
                success: function (data) {
                    // console.log(data["num"]) //取值可以.key值
                    // console.log(data["age"]) //取值可以.key值
                    // console.log(data["peer"]) //取值可以.key值
                },
                error: function (data) {
                    console.log("error");
                    console.log(data)
                }
            });


            layer.msg('已删除!' + id, {icon: 1, time: 1000});
        });
    }
</script>
<script>
    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });
</script>
<script>
    $('#myTable').DataTable({
        "bProcessing": true,//加载进度提示(默认：false)
        "aLengthMenu": [15, 25, 50, 100], //更改显示记录数选项(默认：[10,25,50,100])
        // 国际化
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }

    });
</script>

</html>